<template>
  <div>
    <br><br>
    <section class="container">
      <div>
        <article class="comm-course-list">
          <ul class="of" id="bna">

            <li v-for="image in imageList" :key="image.id">
              <div class="cc-l-wrap" style="user-select: none;border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);margin-top: 20px;margin-right: 3%;margin-left: 3%">
                <section class="course-img">
                  <img
                    :src="image.imageUrl"
                    class="img-responsive"
                    alt="course.title"
                    style="width:300px;height:200px;display:block;margin:0 auto;"
                  >
                  <div class="cc-mask">
<!--                    <a :href="'/image/'+image.id" :title="'查看《'+image.title+'》'" target="_blank" class="comm-btn c-btn-1">开始查看</a>-->
                    <a @click="showImageDetail(image.id)" :title="'查看《'+image.title+'》'" class="comm-btn c-btn-1">开始查看</a>
                 </div>
                </section>
                <h3 class="hLh30 txtOf mt10">
<!--                  <a :href="'/image/'+image.id" :title="image.title" target="_blank" class="course-title fsize18 c-333">{{ image.title }}</a>-->
                  <a @click="showImageDetail(image.id)" :title="image.title" class="course-title fsize18 c-333">&nbsp;&nbsp;&nbsp;{{ image.title }}</a>
                </h3>
                <section class="mt10 hLh20 of">
                    <span class="fr jgTag bg-green">
                      <i class="c-fff fsize12 f-fA">免费图片</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                      <i class="c-999 f-fA">&nbsp;{{ image.size }} KB</i>
                    </span>
                </section>
              </div>
            </li>
          </ul>
          <div class="clear"></div>
        </article>
      </div>
    </section>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

    <!--回到顶部-->
    <div>
      <template>
        <el-backtop></el-backtop>
      </template>
    </div>

    <!-- 弹窗 -->
<!--    <div>-->
<!--      <el-dialog :visible.sync="dialogVisible" width="60%">-->

<!--        <div style="overflow:hidden;">-->
<!--          &lt;!&ndash;上左下右裁剪宽度&ndash;&gt;-->
<!--          <div style="margin:-9% 0% -40% 0%;">-->
<!--            <iframe :src="'/image/'+imageId" width="100%" height="1300"></iframe>-->
<!--          </div>-->
<!--        </div>-->

<!--      </el-dialog>-->
<!--    </div>-->

    <div>
      <el-dialog :visible.sync="dialogVisible" width="60%">

        <div style="overflow:hidden; text-align: center">
          <!--上左下右裁剪宽度-->
          <div>
            <h1 style="font-size: 30px">{{ image.title }}</h1>
          </div>
          <div>
            <img class="image" :src="image.imageUrl" :alt="image.title" :title="image.title">
          </div>
        </div>

      </el-dialog>
    </div>

  </div>

</template>

<script>
import imageApi from '@/api/image'

export default {
  // 写核心代码位置
  data() { // 定义变量和初始值
    return {
      // 弹窗
      dialogVisible: false,
      imageId: '',

      page: 1, // 当前页
      limit: 16, // 每页记录数
      total: 0,
      imageList:[],

      image:{
        imageUrl: "",
        title: ""
      }
    }
  },

  created() {
    //调用图片也加载图片
    this.getList()
  },

  methods: {

    // 打开图片显示弹窗
    showImageDetail(imageId) {
      this.imageId = imageId
      this.getImageInfoById()
      this.dialogVisible = true
    },

    getList(page = 1) {
      this.page = page // 分页修改参数
      imageApi.getPageImage(this.page, this.limit)
        .then(response => {

          console.log("============获取图片页列表============")
          console.log(response.data.data)

          this.imageList = response.data.data.items
          this.total = response.data.data.total

        })
    },

    getImageInfoById() {
      // 调用根据id查询方法
      imageApi.getImageInfoById(this.imageId)
        .then(response => {
          console.log("===========根据id获取图片===========")
          console.log(response.data.data)
          this.image = response.data.data.image
        })
    }
  }
}
</script>

<style>
.image {
  width: 60%;
  height: 50%;
  display: inline-block;
}
</style>
